<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Adminox - Responsive Web App Kit</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description">
	<meta content="Coderthemes" name="author">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- App favicon -->
	<link rel="shortcut icon" href="${ctx}/admin/images/favicon.ico">
	<!-- App css -->
	<link href="${ctx}/admin/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/css/icons.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/css/metismenu.min.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/css/style.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/plugins/sweet-alert2/sweetalert2.min.css" rel="stylesheet" type="text/css">
	<script src="${ctx}/admin/js/modernizr.min.js"></script>
</head>
<body>
<!-- Begin page -->
<div id="wrapper">
	<#include "common/header.ftl">
	<!-- Top Bar End -->
	<!-- ========== Left Sidebar Start ========== -->
    <#include "common/menu.ftl">
	<!-- Left Sidebar End -->
	<!-- ============================================================== -->
	<!-- Start right Content here -->
	<!-- ============================================================== -->
	<div class="content-page">
		<!-- Start content -->
		<div class="content">
			<div class="container-fluid">
				<div class="row">
					<div class="col-12">
						<div class="page-title-box">
							<h4 class="page-title float-left">分类管理</h4>
							<ol class="breadcrumb float-right">
								<li class="breadcrumb-item"><a href="#">deveye</a></li>
								<li class="breadcrumb-item"><a href="#">分类管理</a></li>
								<li class="breadcrumb-item active">分类管理</li>
							</ol>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
				<!-- end row -->
				<div class="row">
					<div class="col-12">
						<div class="card-box">
							<div class="col-lg-12">
								<div class="portlet">
									<div class="portlet-heading bg-primary">
										<h3 class="portlet-title">
											分类列表
										</h3>
										<div class="portlet-widgets">
											<a href="javascript:;" data-toggle="reload"><i class="mdi mdi-refresh"></i></a>
											<a data-toggle="collapse" data-parent="#accordion1" href="#bg-custom"><i
													class="mdi mdi-minus"></i></a>
											<a href="#" data-toggle="remove"><i class="mdi mdi-close"></i></a>
										</div>
										<div class="clearfix"></div>
									</div>
									<div id="bg-custom" class="panel-collapse collapse in show">
										<div class="portlet-body">
											<div class="button-list">

                                            <#assign style = ["btn-pink", "btn-primary","btn-success",
                                            "btn-purple","btn-custom","btn-info","btn-warning","btn-inverse","btn-danger"]/>
                                            <#list categoryList as category >
												<div class="btn-group">
													<button type="button"
													        class="btn ${style[category_index%9]}  btn-lg waves-effect w-md waves-light dropdown-toggle"
													        data-toggle="dropdown">
                                                        ${category.title} (${category.contentCount})
													</button>
													<div class="dropdown-menu">
														<a class="dropdown-item"
														   onclick="edit('${category.title}',${category.id})" href="#">修改</a>
														<a class="dropdown-item" onclick="del(${category.id})" href="#">删除</a>
													</div>
												</div>
                                            </#list>
												<input type="hidden" value="" id="category-id"/>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="m-t-15 m-l-15">
								<form class="form-inline" role="form">
									<div class="form-group">
										<label class="sr-only" for="category">名称</label>
										<input type="text" class="form-control input-lg" id="category"
										       placeholder="请输入分类名称">
									</div>
									<button type="button" id="add-category"
									        class="btn btn-primary waves-effect waves-light m-l-10 btn-lg">保存
									</button>
								</form>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
				<!-- End row -->
			</div>
			<!-- container -->
		</div>
		<!-- content -->
		<#include "common/footer.ftl"/>
	</div>
	<!-- ============================================================== -->
	<!-- End Right content here -->
	<!-- ============================================================== -->
</div>
<!-- END wrapper -->
<!-- jQuery  -->
<script src="${ctx}/admin/js/jquery.min.js"></script>
<script src="${ctx}/admin/js/tether.min.js"></script>
<!-- Tether for Bootstrap -->
<script src="${ctx}/admin/js/bootstrap.min.js"></script>
<script src="${ctx}/admin/js/metisMenu.min.js"></script>
<script src="${ctx}/admin/js/waves.js"></script>
<script src="${ctx}/admin/js/jquery.slimscroll.js"></script>
<script src="${ctx}/admin/plugins/sweet-alert2/sweetalert2.min.js"></script>
<!-- App js -->
<script src="${ctx}/admin/js/jquery.core.js"></script>
<script src="${ctx}/admin/js/jquery.app.js"></script>
<script type="text/javascript">
	$(function () {
		$("#add-category").click(function () {
			var category = $("#category").val();
			var categoryId = $("#category-id").val();
			if (undefined == categoryId || categoryId == '') {
				$.ajax({
					url: '${ctx}/admin/taxonomy/add',
					data: {"title": category, "type": "category"},
					type: 'post',
					success: function (res) {
						if (res.status == '200') {
							sweetAlert("提示！", "添加成功！", "success").then(function () {
								window.location.reload();
							})
						} else {
							sweetAlert("提示！", res.message, "warning")
						}
					}
				})
			} else {
				$.ajax({
					url: '${ctx}/admin/taxonomy/update',
					data: {"id": categoryId, "title": category},
					type: 'post',
					success: function (res) {
						if (res.status == '200') {
							sweetAlert("提示！", "修改成功！", "success").then(function () {
								window.location.reload();
							})
						} else {
							sweetAlert("提示！", res.message, "warning")
						}
					}
				})
			}

		})
	})

	function del(id) {
		swal({
			title: '确定删除吗？',
			text: '你将无法恢复它！',
			type: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: '确定',
			cancelButtonText: '取消'
		}).then(function () {
			$.ajax({
				url: '${ctx}/admin/taxonomy/delete',
				data: {'id': id},
				type: 'post',
				success: function (res) {
					if (res.status == '200') {
						swal({
							title: "删除成功！",
							text: "您已经永久删除了这条信息。",
							type: "success"
						}).then(function () {
							window.location.reload();
						})
					} else {
						swal("提示！", res.message, "warning")
					}
				}

			})
		})
	}

	function edit(title, id,) {
		$("#category").val(title);
		$("#category-id").val(id);
	}
</script>
</body>
</html>